<script setup lang="ts">
import { getCurrentInstance, ref, reactive, watch, onBeforeMount, onMounted, onUpdated, nextTick } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'
const { proxy } = getCurrentInstance()

/* ---- */
const userInfo = proxy.$Store.get('userInfo') || {}
let logUser = proxy.$Store.get('logUser') || {}
const WXConfig = proxy.$Store.get('WXConfig') || {}
const forSys = proxy.$Sys || []

/* --设置微信分享功能-- */
proxy.$WxTool.loadJsdk(WXConfig, (obj) => {
  if (!obj) return
  // ----
  obj.hideMenuItem()
})

/* ---- */
const totalCount = ref(0)
// ----
let users = []
// ----
const user = reactive({
  info: '',
  perview: 5,
  // ----
  lookIds: [],
  // ----
  title: '《中国供应商》',
  // ----
  power: 1
})
// ----
const busi = ref(null)
const busis = ref([])
let tag = null
const tags = ref([])
let tagsData = []
let dataFilters = []
const infoSch = ref(null)
const forSearch = ref(proxy.$Store.get('forSearch') || {})
// ----
let menuIndex = 0
let menuSwiper = null
const menuText = '全部商友'
// ----
const moveTime = 50
let showMarquee = null
// ----
const curProv = ref(null)
let myProvince = null
const myCity = ref(null)
let myDistrict = null
let myIndex = 0
const myCityData = proxy.$City
// ----
const tSpeed = 300
let bar = null
let clientWidth = 0
let navWidth = 0
let navSwiper = null
const navText = '全部'
const areas = ref([])
// --mescroll--
let noData = proxy.$Global.noData
let mescroll = null
const items = ref([])

/* ---- */
const sidebar = ref()
const sliding = ref()
const preImg = ref()
const layer = ref()
const layerBox = ref()

/* ---- */
const setAppTitle = (title) => {
  document.title = title
  // --利用iframe的onload事件刷新页面--
  const iframe = document.createElement('iframe')
  iframe.style.visibility = 'hidden'
  iframe.style.width = 0
  iframe.style.height = 0
  document.body.appendChild(iframe)
  nextTick(() => { document.body.removeChild(iframe) })
}
// ----
const initData = () => {
  myCityData.some((one) => {
    if (Number(one.text.indexOf(myProvince)) !== Number(-1)) {
      if (one.children) {
        one.children.some((two) => {
          if (Number(two.text.indexOf(myCity.value)) !== Number(-1)) {
            if (two.children) {
              areas.value = two.children
              if (myDistrict) {
                two.children.some((three, index) => {
                  if (Number(three.text.indexOf(myDistrict)) !== Number(-1)) myIndex = index + 1
                })
              }
            } else {
              areas.value = []
            }
          }
        })
      }
    }
  })
}
// --initSwiperData || changeSwiperData--
const onSwiper = (swiper) => { navSwiper = swiper }
const initSwiper = (index) => {
  if (Number(areas.value.length) === 0) return false
  // --初始化--
  if (!navSwiper.el.querySelector('.bar')) {
    const newBar = document.createElement('div')
    newBar.setAttribute('class', 'bar')
    newBar.innerHTML = '<span class="xw-anim"></span>'
    navSwiper.wrapperEl.appendChild(newBar)
  }
  bar = navSwiper.el.querySelector('.bar')
  navSwiper.slides[navSwiper.activeIndex].querySelector('span').style.color = '#3388ff'
  // --Nav的可视宽度--
  clientWidth = navSwiper.wrapperEl.offsetWidth
  navWidth = 0
  for (let i = 0; i < navSwiper.slides.length; i++) {
    navWidth += navSwiper.slides[i].offsetWidth
  }
  // --点击slide事件--
  navSwiper.on('tap', () => {
    swiperMescroll(navSwiper.clickedIndex)
    // ----
    const newItems = []
    if (navSwiper.slides[navSwiper.clickedIndex].querySelector('span').innerText !== String(navText)) newItems.push(navSwiper.slides[navSwiper.clickedIndex].querySelector('span').innerText)
    proxy.$Myfun.setSearchRes(proxy, newItems, ['district'], (result) => { forSearch.value = result })
  })
  // ----
  setTimeout(() => { swiperMescroll(index) }, 100)
}
const swiperMescroll = (index) => {
  const clickIndex = index
  const clickSlide = navSwiper.slides[clickIndex]
  const activeSlidePosition = navSwiper.slides[clickIndex].offsetLeft

  // --释放时导航移动过渡--
  bar.style.transitionDuration = tSpeed + 'ms'
  bar.style.width = clickSlide.offsetWidth + 'px'
  bar.querySelector('span').style.width = clickSlide.querySelector('span').offsetWidth + 'px'
  bar.style.transform = 'translateX(' + activeSlidePosition + 'px)'

  // --导航居中--
  const navSlideWidth = clickSlide.offsetWidth
  // --activeSlide距左边的距离--
  const navActiveSlideLeft = navSwiper.slides[clickIndex].offsetLeft

  navSwiper.setTransition(tSpeed)
  if (navWidth > clientWidth) {
    if (navActiveSlideLeft < (clientWidth - navSlideWidth) / 2) {
      navSwiper.setTranslate(0)
    } else if (navActiveSlideLeft > navWidth - (navSlideWidth + clientWidth) / 2) {
      navSwiper.setTranslate(clientWidth - navWidth)
    } else {
      navSwiper.setTranslate((clientWidth - navSlideWidth) / 2 - navActiveSlideLeft)
    }
  }

  navSwiper.slides.forEach((current) => { current.querySelector('span').style.color = '#111111' })
  clickSlide.style.transitionDuration = tSpeed + 'ms'
  clickSlide.querySelector('span').style.color = '#3388ff'
}
// ----
const onSwiperMenu = (swiper) => { menuSwiper = swiper }
const initmenuSwiper = (index) => {
  if (Number(busis.value.length) === 0) return false
  // --初始化--
  menuSwiper.slides.forEach((current) => { current.classList.remove('active') })
  menuSwiper.slides[index].classList.add('active')
  menuSwiper.slideTo(index)
  // --点击slide事件--
  menuSwiper.on('tap', () => {
    menuSwiper.slides.forEach((current) => { current.classList.remove('active') })
    menuSwiper.slides[menuSwiper.clickedIndex].classList.add('active')
    // ----
    if (Number(menuSwiper.slides[menuSwiper.clickedIndex].getAttribute('data-ID')) === -1 && Number(user.power) === 1) {
      busi.value = menuSwiper.slides[menuSwiper.clickedIndex].getAttribute('data-ID')
      proxy.$Myfun.openPage(proxy, 'push', 'UserLogin')
      return false
    }
    // ----
    const newItems = []
    if (menuSwiper.slides[menuSwiper.clickedIndex].querySelector('div').innerText !== String(menuText)) newItems.push(menuSwiper.slides[menuSwiper.clickedIndex].getAttribute('data-ID'))
    proxy.$Myfun.setSearchRes(proxy, newItems, ['busi', 'province', 'city', 'district', 'infoSch', 'tag'], (result) => { forSearch.value = result })
  })
}
// ----
const setTagsMenu = () => {
  // --商友属性过滤--
  let dataItems = []
  if (busi.value && Number(busi.value) > 0) {
    dataFilters.forEach((item, index) => {
      if (String(item.busi_id) === String(',' + busi.value + ',')) dataItems.push(item)
    })
  } else {
    dataItems = dataFilters
  }
  // --行业分类过滤--
  const tagItems = []
  tagsData.forEach((item, index) => {
    const isHave = dataItems.some((curItem) => {
      if (String(curItem.tag_id) === String(',' + item.value + ',')) return true
    })
    if (isHave) tagItems.push(item)
  })
  // ----
  tags.value = tagItems
  // --初始化左边菜单--
  if (Number(tags.value.length) > 0) nextTick(() => { getSideBar() })
}
const setPublicInfo = async (item, callback) => {
  await proxy.$http[item.type](item.url, item.data).then((res) => {
    if (res) callback && callback(res)
  }).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
}
// ----
const setMarquee = () => {
  if (proxy.$refs.forMarquee) {
    const el = proxy.$refs.forMarquee.querySelector('ul')
    const forLi = el.innerHTML
    if (Number(el.firstChild.offsetWidth) > Number(el.offsetWidth)) {
      el.innerHTML = forLi + forLi
      showMarquee = setInterval(marqueefun, moveTime)
    }
  }
}
const marqueefun = () => {
  if (proxy.$refs.forMarquee) {
    const el = proxy.$refs.forMarquee.querySelector('ul')
    if (Number(el.lastChild.offsetWidth) <= Number(el.scrollLeft)) {
      el.scrollLeft = el.scrollLeft - el.firstChild.offsetWidth
    } else {
      el.scrollLeft = el.scrollLeft + 1
    }
  }
}
const stopRolling = () => {
  if (showMarquee) {
    clearInterval(showMarquee)
    showMarquee = null
  } else {
    showMarquee = setInterval(marqueefun, moveTime)
  }
}
// ----
const getUserLogInfo = async () => {
  if (Number(Object.keys(logUser).length) > 0) {
    user.power = 2
    // --获取查看商友记录信息--
    await proxy.$http.get('dealer-has-log/index', {
      params: {
        'DealerHasLogSearch[dealer_id]': logUser.id,
        // --浏览中国供应商--
        'DealerHasLogSearch[type]': 2,
        // ----
        page: 1,
        PageSize: 1000000000000
      }
    }).then((res) => {
      const idsItems = []
      res.items.forEach((item) => {
        idsItems.push(item.to_dealer_id)
      })
      user.lookIds = idsItems
    }).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
  }
}
// ----
const getCurrencyInfo = async (callback) => {
  // --获取系统设置无数据提示--
  const noDataItems = forSys.filter((item) => { return String(item.name) === 'market_noData' })
  if (Number(noDataItems.length) === 1) {
    proxy.$Myfun.getJsonData(noDataItems[0].value, (resJson) => {
      if (Array.isArray(resJson)) {
        resJson.some((item, index) => {
          if (String(item.id) === 'wholeUsers' && Number(item.desc.length) > 0) noData = proxy.$Myfun.setText(item.desc)
        })
      }
    })
  }
  // ----
  await getUserLogInfo()
  // ----
  if (user.info) nextTick(() => { setMarquee() })
  // --获取商友属性--
  const busiItems = forSys.filter((item) => { return String(item.name) === 'market_busiattrib' })
  if (Number(busiItems.length) === 1) {
    await proxy.$Myfun.getJsonData(busiItems[0].value, (resJson) => {
      const newItems = []
      resJson[0].list.forEach((item) => {
        newItems.push({
          value: String(item.id),
          text: proxy.$Myfun.setText(item.name)
        })
      })
      busis.value = newItems
    })
  }
  // --增加查看历史--
  if (Number(busis.value.length) > 0) {
    busis.value.push({
      value: String(-1),
      text: '查看历史'
    })
  }
  busis.value.some((item, index) => {
    if (String(item.value) === String(busi.value)) menuIndex = index + 1
  })
  // ----
  nextTick(() => { initmenuSwiper(menuIndex) })
  // --获取所有用户信息 & 过滤用户信息 & 行业分类--
  const forUserData = {
    params: {
      page: 1,
      PageSize: 1000000000000
    }
  }
  const forFiltData = {
    params: {
      // --打开批发商展示--
      'DealerSearch[is_warehouse]': 1,
      // ----
      page: 1,
      PageSize: 1000000000000
    }
  }
  const forTagData = {
    params: {
      sort: 'SORT_ASC',
      // ----
      page: 1,
      PageSize: 1000000
    }
  }
  await proxy.$Axios.all([
    proxy.$Axios.get('dealer/index', forUserData),
    proxy.$Axios.get('dealer/index', forFiltData),
    proxy.$Axios.get('maincate/index', forTagData)
  ]).then(proxy.$Axios.spread((userData, filtData, tagData) => {
    // --所有用户信息--
    const userItems = []
    userData.items.forEach((item, index) => {
      userItems.push({
        id: String(item.id),
        name: item.name,
        remark: item.remark,
        intention: item.intention,
        leader: item.leader,
        gender: item.gender,
        tag: item.tag,
        telphone: item.telphone,
        wechat_img: item.wechat_img
      })
    })
    users = userItems
    // --过滤用户信息--
    const filtItems = []
    filtData.items.forEach((item, index) => {
      filtItems.push({
        tag_id: item.maincate_id,
        busi_id: item.connections_type
      })
    })
    dataFilters = filtItems
    // --行业分类--
    const tagItems = []
    tagData.items.forEach((item) => {
      tagItems.push({
        value: String(item.id),
        text: proxy.$Myfun.setText(item.name)
      })
    })
    tagsData = tagItems
  })).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
  // ----
  await setTagsMenu()
  // --设置网页title--
  const forTitle = user.title || document.title
  setAppTitle(forTitle)
  // ----
  callback && callback()
}
// --getData--
const startMeScroll = () => {
  mescroll = new MeScroll(proxy.$refs.dataScroll, {
    up: {
      callback: getListData,
      isBounce: false,
      page: { num: 0, size: 10 },
      htmlNodata: '<p class="upwarp-nodata">-- 到底啦 --</p>',
      noMoreSize: 10,
      toTop: {
        src: '/pics/mescroll-totop.png',
        offset: 1000
      },
      empty: {
        warpId: proxy.$refs.dataList,
        tip: noData
      }
    }
  })
}
const getListData = (page) => {
  let curUrl = 'dealer/index'
  let curData = {
    params: {
      'DealerSearch[name]': infoSch.value,
      'DealerSearch[connections_type]': busi.value ? ',' + busi.value + ',' : undefined,
      'DealerSearch[maincate_id]': tag ? ',' + tag + ',' : undefined,
      'DealerSearch[province]': myProvince,
      'DealerSearch[city]': myCity.value,
      'DealerSearch[district]': myDistrict || undefined,
      // --打开批发商展示--
      'DealerSearch[is_warehouse]': 1,
      // ----
      page: page.num,
      PageSize: page.size
    }
  }
  if (Number(busi.value) === -1) {
    curUrl = 'dealer-has-log/index'
    curData = {
      params: {
        'DealerHasLogSearch[name]': infoSch.value,
        'DealerHasLogSearch[maincate_id]': tag ? ',' + tag + ',' : undefined,
        'DealerHasLogSearch[province]': myProvince,
        'DealerHasLogSearch[city]': myCity.value,
        'DealerHasLogSearch[district]': myDistrict || undefined,
        // ----
        'DealerHasLogSearch[dealer_id]': logUser.id,
        // --浏览中国供应商--
        'DealerHasLogSearch[type]': 2,
        // ----
        page: page.num,
        PageSize: page.size
      }
    }
  }
  // ----
  getListDataFromNet({
    forUrl: curUrl,
    forData: curData
  }, page.num, page.size, (curPageData) => {
    switch (Number(busi.value)) {
      case -1: {
        setListDataTwo(curPageData).then((result) => {
          mescroll.endSuccess(curPageData ? curPageData.length : 0, true)
          items.value = items.value.concat(result)
        })
        break
      }
      default: {
        setListDataOne(curPageData).then((result) => {
          if (Number(result.length) > 0) {
            mescroll.endSuccess(curPageData.length, true)
          } else {
            mescroll.endSuccess(0, true)
          }
          items.value = items.value.concat(result)
        })
      }
    }
  }, (resMsg) => {
    mescroll.endErr()
    proxy.$Myfun.forToast(layer.value, 'open', resMsg)
  })
}
const getListDataFromNet = (option, pageNum, pageSize, successCallback, errorCallback) => {
  if (Number(pageNum) === 1) {
    if (document.querySelector('.upwarp-nodata')) { document.querySelector('.upwarp-nodata').style.visibility = 'hidden' }
    items.value = []
  }
  // ----
  proxy.$http.get(option.forUrl, option.forData).then((res) => {
    totalCount.value = res._meta.totalCount
    // ----
    successCallback && successCallback(res.items)
  }).catch((err) => { errorCallback && errorCallback(err) })
}
const setListDataOne = async (items) => {
  const newItems = []
  for (let i = 0; i < Number(items.length); i++) {
    const item = items[i]
    // ----
    if (String(item.telphone) === String(proxy.$Phone)) continue
    // ----
    let forImg = ''
    const advItems = []
    await proxy.$Myfun.getJsonData(item.intention, (resJson) => {
      if (Number(resJson.length) > 0) forImg = resJson[0].image
      // ----
      resJson.forEach((curItem) => {
        advItems.push({
          msrc: curItem.image,
          src: curItem.image,
          width: curItem.width,
          height: curItem.height,
          alt: ''
        })
      })
    })
    // ----
    let forSex = ''
    if (Number(item.gender) > 0) forSex = (Number(item.gender) === 1) ? 'fa fa-user-tie-hair xw-color-12' : 'fa fa-user-tie-hair-long xw-color-5'
    // ----
    let forWechatImg = ''
    await proxy.$Myfun.getJsonData(item.wechat_img, (resJson) => {
      if (Number(resJson.length) > 0) forWechatImg = resJson[0].image
    })
    // ----
    const forLook = user.lookIds.some((curItem) => {
      if (Number(curItem) === Number(item.id)) return true
    })
    // ----
    newItems.push({
      id: item.id,
      name: proxy.$Myfun.setText(item.name),
      desc: proxy.$Myfun.setText(item.remark),
      image: forImg,
      leader: proxy.$Myfun.setText(item.leader),
      sexIcon: forSex,
      telphone: item.tag || item.telphone,
      wechat_img: forWechatImg,
      advs: advItems,
      // ----
      isLook: forLook
    })
  }
  return newItems
}
const setListDataTwo = async (items) => {
  const newItems = []
  for (let i = 0; i < Number(items.length); i++) {
    const item = items[i]
    // ----
    let forUser = {}
    users.some((curItem) => {
      if (String(curItem.id) === String(item.to_dealer_id)) forUser = curItem
    })
    // ----
    let forImg = ''
    const advItems = []
    await proxy.$Myfun.getJsonData(forUser.intention, (resJson) => {
      if (Number(resJson.length) > 0) forImg = resJson[0].image
      // ----
      resJson.forEach((curItem) => {
        advItems.push({
          msrc: curItem.image,
          src: curItem.image,
          width: curItem.width,
          height: curItem.height,
          alt: ''
        })
      })
    })
    // ----
    let forSex = ''
    if (Number(forUser.gender) > 0) forSex = (Number(forUser.gender) === 1) ? 'fa fa-user-tie-hair xw-color-12' : 'fa fa-user-tie-hair-long xw-color-5'
    // ----
    let forWechatImg = ''
    await proxy.$Myfun.getJsonData(forUser.wechat_img, (resJson) => {
      if (Number(resJson.length) > 0) forWechatImg = resJson[0].image
    })
    // ----
    newItems.push({
      logId: item.id,
      // ----
      id: item.to_dealer_id,
      name: proxy.$Myfun.setText(forUser.name),
      desc: proxy.$Myfun.setText(forUser.remark),
      image: forImg,
      leader: proxy.$Myfun.setText(forUser.leader),
      sexIcon: forSex,
      telphone: forUser.tag || forUser.telphone,
      wechat_img: forWechatImg,
      advs: advItems
    })
  }
  return newItems
}
const divScroll = (event) => { proxy.$Myfun.setImgToTop() }
// ----
const getSideBar = () => {
  const options = {
    type: 0,
    forall: { show: true, text: '选择行业' },
    itemId: tag || 0,
    list: tags.value,
    callback: (info) => {
      const newItems = []
      if (info) newItems.push(info.value)
      proxy.$Myfun.setSearchRes(proxy, newItems, ['tag'], (result) => { forSearch.value = result })
    }
  }
  proxy.$Myfun.isIndepth(sidebar.value, 'open', options)
}
const emptyInfo = (event) => {
  const curEL = event.currentTarget
  const input = curEL.parentElement.querySelector('input')
  input.value = ''
  input.dispatchEvent(new Event('input'))
  // ----
  getHeadFun(2)
}
// ----
const getHeadFun = (type) => {
  switch (Number(type)) {
    case 1: {
      const options = {
        type: 1,
        forall: { show: true, text: '不限地区' },
        slideName: 'slideLeft',
        boxClass: 'SLB-box-left',
        itemName: myProvince || '',
        childName: myCity.value || '',
        title: '选择地区',
        list: myCityData,
        callback: (info) => {
          proxy.$Myfun.setSearchRes(proxy, info, ['province', 'city'], (result) => { forSearch.value = result })
        }
      }
      proxy.$Myfun.isIndepth(sliding.value, 'open', options)
      break
    }
    case 2: {
      const newItems = []
      newItems.push(infoSch.value)
      proxy.$Myfun.setSearchRes(proxy, newItems, ['infoSch'], (result) => { forSearch.value = result })
      break
    }
  }
}
const getAuditFun = (type, item, event) => {
  if (Number(user.power) === 1) {
    proxy.$Myfun.openPage(proxy, 'push', 'UserLogin', { toBack: true })
    return false
  }
  // ----
  const forEvent = event ? event.currentTarget : null
  // ----
  getAuditFunNext(type, item, forEvent)
}
const getAuditFunNext = async (type, item, event) => {
  if (Number(item.id) !== Number(logUser.id)) {
    const isLook = user.lookIds.some((theItem) => {
      if (Number(theItem) === Number(item.id)) return true
    })
    if (!isLook) {
      // --增加查看商友记录--
      await setPublicInfo({
        type: 'post',
        url: 'dealer-has-log/create',
        data: {
          dealer_id: logUser.id,
          to_dealer_id: item.id,
          // --浏览中国供应商--
          type: 2,
          // ----
          config_id: userInfo.config_id,
          openid: userInfo.openid
        }
      }, (res) => {
        item.isLook = true
        // ----
        user.lookIds.push(item.id)
      })
    }
    // --增加批发商浏览量--
    if (Number(item.advs.length) > 0 && Number(type) === 1) {
      setPublicInfo({
        type: 'post',
        url: 'wechat/update-dealer-views',
        data: {
          id: item.id,
          // ----
          config_id: userInfo.config_id,
          openid: userInfo.openid
        }
      })
    }
  }
  // ----
  switch (Number(type)) {
    case 1: {
      if (Number(item.advs.length) > 0) {
        const curEL = event
        const options = {
          actElement: curEL,
          addopt: {
            loop: true,
            dataSource: item.advs
          }
        }
        proxy.$Myfun.isIndepth(preImg.value, 'openPhotoSwipe', options)
      }
      break
    }
    case 2: {
      let forDesc = '<div style="line-height: 2.5rem; text-align: justify;"><b>' + item.name + '</b><div>'
      if (item.desc && Number(item.desc.length) > 0) forDesc = '<div style="line-height: 2.5rem; text-align: justify;"><b style="display: block; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #d7d7d7;">' + item.name + '</b>' + item.desc + '<div>'
      const options = {
        type: 3,
        content: forDesc
      }
      proxy.$Myfun.isIndepth(layerBox.value, 'open', options)
      break
    }
    case 3: {
      let options = {
        title: proxy.$Global.layer.titleTwo + item.telphone,
        content: proxy.$Global.layer.conEver,
        button: [{
          text: proxy.$Global.layer.btnCancel
        }, {
          text: proxy.$Global.layer.btnAsk, 
          class: 'xw-color-24',
          callback: () => { window.location.href = 'tel:' + item.telphone }
        }]
      }
      if (item.wechat_img) {
        options = {
          title: proxy.$Global.layer.titleThree,
          content: '<div style="padding: 0 2.4rem;"><img src="' + item.wechat_img + '" style="width: 100%;"/></div>',
          button: [{
            text: proxy.$Global.layer.btnCancel
          }, {
            text: proxy.$Global.layer.btnAsk,
            class: 'xw-color-24',
            callback: () => { window.location.href = 'tel:' + item.telphone }
          }]
        }
      }
      proxy.$Myfun.isIndepth(layerBox.value, 'open', options)
      break
    }
    case 4: {
      window.location.href = 'tel:' + item.telphone
      break
    }
    case 5: {
      proxy.$Myfun.openPage(proxy, 'push', 'AddrMap', { dealer_id: item.id })
      break
    }
  }
}
// ----
const setDelInfo = (item) => {
  const options = {
    content: proxy.$Global.layer.conDel,
    button: [{
      text: proxy.$Global.layer.btnCancel
    }, {
      text: proxy.$Global.layer.btnDel,
      class: 'xw-color-24',
      callback: async () => {
        layerBox.value.close()
        // ----
        await proxy.$http.delete('dealer-has-log/delete?id=' + item.logId, {
          config_id: userInfo.config_id,
          openid: userInfo.openid
        }).then((res) => {}).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
        // ----
        mescroll.scrollTo(0)
        mescroll.resetUpScroll()
      }
    }]
  }
  proxy.$Myfun.isIndepth(layerBox.value, 'open', options)
}

/* ---- */
watch(() => forSearch.value, async (newVal, oldVal) => {
  busi.value = newVal.busi
  tag = newVal.tag
  infoSch.value = newVal.infoSch
  // ----
  if (String(newVal.busi) !== String(oldVal.busi)) {
    await getUserLogInfo()
    await setTagsMenu()
  }
  // ----
  curProv.value = newVal.province || '选择地区'
  // ----
  myProvince = newVal.province
  myCity.value = newVal.city
  myDistrict = newVal.district
  // ----
  if (String(newVal.province) !== String(oldVal.province) || String(newVal.city) !== String(oldVal.city)) {
    myDistrict = null
    myIndex = 0
    // ----
    proxy.$Myfun.setSearchRes(proxy, [myProvince, myCity.value], ['province', 'city', 'district'], (result) => { forSearch.value = result })
    // ----
    if (myProvince && myCity.value) {
      initData()
      nextTick(() => { initSwiper(myIndex) })
    }
  } else {
    // --重新请求数据--
    mescroll.scrollTo(0)
    mescroll.resetUpScroll()
  }
}, { deep: true })

/* ---- */
onBeforeMount(() => {
  if (Number(Object.keys(logUser).length) === 0 && Number(forSearch.value.busi) === -1) {
    proxy.$Store.remove('forSearch', () => { forSearch.value = {} })
  }
  // ----
  busi.value = forSearch.value.busi
  tag = forSearch.value.tag
  infoSch.value = forSearch.value.infoSch
  // ----
  curProv.value = forSearch.value.province || '选择地区'
  // ----
  myProvince = forSearch.value.province
  myCity.value = forSearch.value.city
  myDistrict = forSearch.value.district
})
onMounted(() => {
  if (myProvince && myCity.value) {
    initData()
    nextTick(() => { initSwiper(myIndex) })
  }
  // ----
  getCurrencyInfo(() => {
    // --创建MeScroll对象--
    setTimeout(() => { startMeScroll() }, 500)
  })
})
onUpdated(() => { nextTick(() => { proxy.$Myfun.setSectionH() }) })
onBeforeRouteLeave(() => {
  if (mescroll) mescroll.destroy()
  proxy.$Store.remove('forSearch', () => {
    if (Number(busi.value) === -1 && Number(user.power) === 1) proxy.$Store.set('forSearch', { busi: String(busi.value) })
  })
})
</script>

<template>
  <div>
    <header class="xw-bg-gray">
      <div class="xw-msg xw-flex xw-flex-align" v-if="user.info">
        <em class="far fa-volume-up xw-color-2"></em>
        <div class="forMarquee xw-flex-W1">
          <div ref="forMarquee" class="FMQ-con xw-act xw-flex xw-flex-align" @click="stopRolling">
            <ul class="xw-flex-W1">
              <li>{{user.info}}</li>
            </ul>
          </div>
        </div>
      </div>
      <!---->
      <div class="forCha xw-bgCL-11" v-if="Number(busis.length) > 0">
        <swiper class="FCA-menu" :slides-per-view="user.perview" @swiper="onSwiperMenu">
          <swiper-slide><div class="xw-flex"><p class="xw-anim xw-flex-W1 xw-flex xw-flex-center">{{menuText}}</p></div></swiper-slide>
          <swiper-slide v-for="(item, index) in busis" :data-ID="item.value"><div class="xw-flex"><p class="xw-anim xw-flex-W1 xw-flex xw-flex-center">{{item.text}}</p></div></swiper-slide>
        </swiper>
      </div>
      <!---->
      <div class="forTop xw-flex xw-flex-align">
        <a class="TOP-puretxt TOP-L xw-flex xw-flex-center" @click="getHeadFun(1)">{{curProv}}</a>
        <div class="TOP-sch xw-bg-white xw-radius-3 xw-flex-W1 xw-flex xw-flex-align">
          <em class="far fa-search TOP-L"></em>
          <p class="xw-flex-W1"><input class="schText" type="text" :placeholder="'找供应商（' + totalCount + '家）'" v-model.trim="infoSch"/></p>
          <transition name="fade"><em class="fa fa-times-circle" @click="emptyInfo" v-if="infoSch"></em></transition>
          <span class="TOP-btn TOP-R xw-Lfg" @click="getHeadFun(2)">搜索</span>
        </div>
      </div>
      <div class="forNav xw-flex xw-flex-align" v-if="myCity">
        <span class="FNV-title FNV-L xw-Rfg">{{myCity}}</span>
        <div class="FNV-menu xw-flex-W1">
          <div class="FNV-box FNV-L FNV-R" v-if="Number(areas.length) > 0">
            <swiper :slides-per-view="'auto'" :freeMode="true" @swiper="onSwiper">
              <swiper-slide><span class="xw-middle">{{navText}}</span></swiper-slide>
              <swiper-slide v-for="(item, index) in areas"><span class="xw-middle">{{item.text}}</span></swiper-slide>
            </swiper>
          </div>
          <p class="xw-noData xw-middle" v-else >该地区无区县</p>
        </div>
      </div>
    </header>
    <div class="xw-section xw-flex">
      <div class="opp-menu xw-Rfg" v-if="Number(tags.length) > 0"><sidebar-view ref="sidebar"/></div>
      <div class="opp-con xw-bg-white xw-flex-W1">
        <div ref="dataScroll" class="mescroll" @scroll="divScroll">
          <ul class="list-user xw-flex xw-flex-column" ref="dataList">
            <template v-if="Number(busi) === -1">
            <li class="xw-Tfg" v-for="(item, index) in items">
              <slidevent-view @showDel="setDelInfo(item)"><div class="LUR-box">
                <div class="LUR-con xw-act xw-flex" @click="getAuditFun(1, item, $event)">
                  <div class="LUR-avar xw-radius-3"><div class="xw-bgImg" :style="{ backgroundImage: 'url(' + item.image + ')' }"></div></div>
                  <div class="LUR-name xw-ellipsis-3 xw-flex-W1">{{item.name}}</div>
                </div>
                <div class="LUR-info xw-flex xw-flex-align">
                  <div class="xw-flex-W1">
                    <div class="LUR-leader xw-flex xw-flex-align" v-if="item.leader">
                      <em :class="item.sexIcon" v-if="item.sexIcon"></em>
                      <div class="LUR-max xw-ellipsis">{{item.leader}}</div>
                    </div>
                  </div>
                  <a class="LUR-btn xw-Rfg xw-flex xw-flex-align" @click="getAuditFun(2, item)"><em class="fal fa-book-open-cover xw-color-2"></em></a>
                  <a class="LUR-btn xw-Rfg xw-flex xw-flex-align" @click="getAuditFun(3, item)"><em class="fal fa-comments xw-color-1"></em></a>
                  <a class="LUR-btn xw-Rfg xw-flex xw-flex-align" @click="getAuditFun(4, item)"><em class="fal fa-phone-volume xw-color-3"></em></a>
                  <a class="LUR-btn xw-flex xw-flex-align" @click="getAuditFun(5, item)"><em class="fal fa-street-view xw-color-7"></em></a>
                </div>
              </div></slidevent-view>
            </li>
            </template>
            <template v-else>
            <li class="xw-Tfg" v-for="(item, index) in items"><div class="LUR-box">
              <div class="LUR-con xw-act xw-flex" @click="getAuditFun(1, item, $event)">
                <div class="LUR-avar xw-radius-3"><div class="xw-bgImg" :style="{ backgroundImage: 'url(' + item.image + ')' }"></div></div>
                <div class="LUR-name xw-ellipsis-3 xw-flex-W1" :class="{'xw-color-16': item.isLook}">{{item.name}}</div>
              </div>
              <div class="LUR-info xw-flex xw-flex-align">
                <div class="xw-flex-W1">
                  <div class="LUR-leader xw-flex xw-flex-align" v-if="item.leader">
                    <em :class="item.sexIcon" v-if="item.sexIcon"></em>
                    <div class="LUR-max xw-ellipsis">{{item.leader}}</div>
                  </div>
                </div>
                <a class="LUR-btn xw-Rfg xw-flex xw-flex-align" @click="getAuditFun(2, item)"><em class="fal fa-book-open-cover xw-color-2"></em></a>
                <a class="LUR-btn xw-Rfg xw-flex xw-flex-align" @click="getAuditFun(3, item)"><em class="fal fa-comments xw-color-1"></em></a>
                <a class="LUR-btn xw-Rfg xw-flex xw-flex-align" @click="getAuditFun(4, item)"><em class="fal fa-phone-volume xw-color-3"></em></a>
                <a class="LUR-btn xw-flex xw-flex-align" @click="getAuditFun(5, item)"><em class="fal fa-street-view xw-color-7"></em></a>
              </div>
            </div></li>
            </template>
          </ul>
        </div>
      </div>
    </div>
    <sliding-view ref="sliding"/>
    <preImg-view ref="preImg"/>
    <layer-view ref="layer"/>
    <layer-view ref="layerBox"/>
  </div>
</template>

<style scoped>
/* ---- */
.forNav { margin-top: -0.8rem; height: 4rem; }
.FNV-menu { margin-left: 1rem; }
.FNV-menu .swiper { height: 100%; }

.opp-con { position: relative; }
.opp-con .mescroll { padding: 0; }

/* ---- */
.FCA-menu .swiper-slide div p { font-size: 1.4rem; }

/* ---- */
.list-user li:before { left: 1rem; right: 1rem; }
.list-user li:nth-of-type(1):before { display: none; }
.LUR-box { padding: 1.2rem 1rem; }
.LUR-con { margin: 0 0 1rem; }
.LUR-avar { margin: 0 1rem 0 0; width: 7.5rem; height: 7.5rem; }
.LUR-name { line-height: 2.5rem; font-size: 1.7rem; text-align: justify; }
.LUR-leader em { font-size: 1.6rem; margin-right: 0.5rem; }
.LUR-max { max-width: 8rem; }
.LUR-btn { padding: 0 1.2rem; }
.LUR-btn em { font-size: 2rem; }
.LUR-btn:last-of-type { padding-right: 0; }

/* ---- */
.xw-msg { padding: 0.5rem 0 0.5rem 1rem; }

/* ---- */
.forMarquee { height: 100%; padding: 0 1rem; }
.FMQ-con { height: 100%; }
.FMQ-con ul { white-space: nowrap; overflow: hidden; }
.FMQ-con li { display: inline-block; font-size: 1.2rem; }
</style>